// 等待DOM加载完成
document.addEventListener('DOMContentLoaded', function() {
    // 定义服装类型和对应的配置
    const clothingTypes = {
        body: {
            count: 3, // 身体图片数量
            containerId: 'bodyButtons',
            displayContainerId: 'bodyContainer',
            defaultIndex: 1, // 默认显示的索引
            folderName: 'Part_Body',
            fileNamePrefix: 'Part_Body',
            alwaysVisible: true // 始终显示
        },
        eyes: {
            count: 7, // 眼睛图片数量 (从2到8，共7个)
            containerId: 'eyesButtons',
            displayContainerId: 'eyesContainer',
            defaultIndex: null, // 默认不显示
            folderName: 'eyes',
            fileNamePrefix: 'eye',
            startIndex: 2 // 从eye2开始
        },
        shirt: {
            count: 18, // 上衣图片数量
            containerId: 'shirtButtons',
            displayContainerId: 'shirtContainer',
            defaultIndex: 18, // 默认显示的索引
            folderName: 'Part_Shirt',
            fileNamePrefix: 'Part_Shirt',
            alwaysVisible: true // 始终显示
        },
        leggings: {
            count: 6, // 下衣图片数量
            containerId: 'leggingsButtons',
            displayContainerId: 'leggingsContainer',
            defaultIndex: null, // 默认不显示
            folderName: 'Part_Leggings',
            fileNamePrefix: 'Part_Leggings'
        },
        socks: {
            count: 2, // 袜子图片数量
            containerId: 'socksButtons',
            displayContainerId: 'socksContainer',
            defaultIndex: null, // 默认不显示
            folderName: 'socks',
            fileNamePrefix: 'socks'
        },
        shoes: {
            count: 6, // 鞋子图片数量
            containerId: 'shoesButtons',
            displayContainerId: 'shoesContainer',
            defaultIndex: null, // 默认不显示
            folderName: 'shoes',
            fileNamePrefix: 'shoes'
        },
        earrings: {
            count: 1, // 耳环图片数量
            containerId: 'earringsButtons',
            displayContainerId: 'earringsContainer',
            defaultIndex: null, // 默认不显示
            folderName: 'earrings',
            fileNamePrefix: 'earrings'
        },
        headwear: {
            count: 10, // 头饰图片数量
            containerId: 'headwearButtons',
            displayContainerId: 'headwearContainer',
            defaultIndex: null, // 默认不显示
            folderName: 'headwear',
            fileNamePrefix: 'headwear'
        },
        others: {
            count: 10, // 其他图片数量
            containerId: 'othersButtons',
            displayContainerId: 'othersContainer',
            defaultIndex: null, // 默认不显示
            folderName: 'others',
            fileNamePrefix: 'others'
        }
    };
    
    // 为每种服装类型生成按钮
    for (const [type, config] of Object.entries(clothingTypes)) {
        const buttonContainer = document.getElementById(config.containerId);
        const displayContainer = document.getElementById(config.displayContainerId);
        
        if (buttonContainer && displayContainer) {
            // 存储当前选中的按钮
            let selectedButton = null;
            
            // 添加"不显示"按钮
            const hideButton = document.createElement('button');
            hideButton.className = 'clothing-btn hide-btn';
            hideButton.dataset.type = type;
            hideButton.dataset.index = 'hide';
            hideButton.textContent = '×';
            hideButton.title = '隐藏所有此类部件';
            
            // 将隐藏按钮添加到容器
            buttonContainer.appendChild(hideButton);
            
            // 添加隐藏按钮点击事件
            hideButton.addEventListener('click', function() {
                // 移除之前选中按钮的选中状态
                if (selectedButton) {
                    selectedButton.classList.remove('selected');
                }
                
                // 添加当前按钮的选中状态
                this.classList.add('selected');
                selectedButton = this;
                
                // 隐藏所有此类部件
                const items = displayContainer.querySelectorAll(`.clothing-item[data-type="${type}"]`);
                items.forEach(item => {
                    item.style.display = 'none';
                });
            });
            
            // 如果默认不显示，则选中隐藏按钮
            if (config.defaultIndex === null) {
                hideButton.classList.add('selected');
                selectedButton = hideButton;
            }
            
            // 生成正常图片按钮
            const startIndex = config.startIndex || 1;
            const endIndex = config.folderName === 'eyes' ? 8 : config.count + (startIndex - 1); // 眼睛特殊处理，只到8
            
            for (let i = startIndex; i <= endIndex; i++) {
                // 创建按钮
                const button = document.createElement('button');
                button.className = 'clothing-btn';
                button.dataset.type = type;
                button.dataset.index = i;
                
                // 创建图片
                const img = document.createElement('img');
                // 使用缩略图路径，如果存在的话
                const thumbnailPath = `images/${config.folderName}/thumbnail${i}.png`;
                const fullImagePath = `images/${config.folderName}/${config.fileNamePrefix}${i}.png`;
                
                // 尝试使用缩略图，如果没有则使用原图
                img.src = thumbnailPath;
                img.alt = `${type === 'shirt' ? '上衣' : type === 'leggings' ? '下衣' : type === 'body' ? '身体' : type === 'eyes' ? '眼睛' : type === 'socks' ? '袜子' : type === 'shoes' ? '鞋子' : type === 'earrings' ? '耳环' : type === 'headwear' ? '头饰' : '其他'} ${i}`;
                
                // 如果缩略图加载失败，则使用原图
                img.onerror = function() {
                    this.src = fullImagePath;
                };
                
                // 将图片添加到按钮
                button.appendChild(img);
                
                // 将按钮添加到容器
                buttonContainer.appendChild(button);
                
                // 设置默认选中状态
                if (i === config.defaultIndex) {
                    button.classList.add('selected');
                    selectedButton = button;
                }
                
               // 修改按钮点击事件处理逻辑
                button.addEventListener('click', function() {
                    // 检查当前按钮是否已经被选中
                    const isAlreadySelected = this.classList.contains('selected');
                    
                    // 移除之前选中按钮的选中状态
                    if (selectedButton && selectedButton !== this) {
                        selectedButton.classList.remove('selected');
                    }
                    
                    if (isAlreadySelected) {
                        // 如果当前按钮已经被选中，则取消选中并隐藏部件
                        this.classList.remove('selected');
                        selectedButton = null;
                        
                        // 隐藏对应索引的部件
                        const index = this.dataset.index;
                        const existingItem = displayContainer.querySelector(`.clothing-item[data-type="${type}"][data-index="${index}"]`);
                        if (existingItem) {
                            existingItem.style.display = 'none';
                        }
                    } else {
                        // 如果当前按钮未被选中，则添加选中状态并显示部件
                        this.classList.add('selected');
                        selectedButton = this;
                        
                        // 更新显示的图片 - 创建新的图片元素而不是替换现有的
                        const index = this.dataset.index;
                        
                        // 检查是否已存在此索引的元素
                        let existingItem = displayContainer.querySelector(`.clothing-item[data-type="${type}"][data-index="${index}"]`);
                        
                        if (existingItem) {
                            // 如果存在，显示它
                            existingItem.style.display = 'block';
                        } else {
                            // 如果不存在，创建新的图片元素
                            const newItem = document.createElement('img');
                            newItem.className = 'clothing-item';
                            newItem.dataset.type = type;
                            newItem.dataset.index = index;
                            newItem.src = `images/${config.folderName}/${config.fileNamePrefix}${index}.png`;
                            newItem.alt = img.alt;
                            newItem.style.display = 'block';
                            
                            // 添加到显示容器
                            displayContainer.appendChild(newItem);
                        }
                    }
                });
            }
        }
    }
});